<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" href="/taobao/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/taobao/css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="/taobao/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/taobao/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/taobao/css/swiper.min.css"/>
      <script src="/taobao/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	$(window).load(function(){
    		$(".loading").addClass("loader-chanage")
    		$(".loading").fadeOut(300)
    	})
    </script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
<body>
	<header class="detail-header fixed-header">
		<a href="javascript:history.go(-1)"><img src="/taobao/images/detail-left.png"/></a>
		
		<a href="shopcar.html" class="right"><img src="/taobao/images/shopbar.png"/></a>
	</header>
	
	
	<div class="contaniner fixed-contb">
		<section class="detail">
			<figure class="swiper-container">
				<ul class="swiper-wrapper">
					<li class="swiper-slide" th:each="img:${imgs}">
						<a href="#">
							<img th:src="${img}"/>
						</a>
					</li>

				</ul>
				<div class="swiper-pagination">
				</div>
			</figure>
			<dl class="jiage">
				<dt>
					<h3 th:text="${goods.title}"></h3>
					<div class="collect">
						<img src="/taobao/images/detail-heart-hei.png"/>
						<p>收藏</p>
					</div>
				</dt>
				<dd>
					<b th:text="${goods.prices}">￥28.99</b>
					<del th:text="${goods.prices}">￥139</del>
					<input type="button" value="￥10.00" readonly />
					<small>+356积分</small>
				</dd>
			</dl>
			
			<div class="chose">
				<ul>
					<h3>颜色</h3>
					<li>
						黑色
					</li>
					<li>
						粉色
					</li>
					<li>
						灰色
					</li>
					<li>
						红色
					</li>
				</ul>
				<ul>
					<h3>尺寸</h3>
					<li>
						L
					</li>
					<li>
						XL
					</li>
					<li>
						XXL
					</li>
				</ul>
			</div>
			
			<a href="#" class="seven">
				<b>7</b>天无理由退换货
				<span id="sss"></span>
			</a>
			
			<ul class="same">
				<a href="#">
					<span>
						同类推荐
					</span>
					<li class="one" th:each="g:${typeGoods}">
						<img th:src="@{'/upload/project/'+${g.img}}"/>
						<p th:text="${g.prices}">￥188.00</p>
					</li>

				</a>
			</ul>
			
			<article class="detail-article">
				<nav>
					<ul class="article">
						<li id="talkbox1" class="article-active">商品详情</li>
						<li id="talkbox2">评价</li>
					</ul>
				</nav>

				<section class="talkbox1">
					会尽快啦辅导费发挥大路口
				</section>

				<section class="talkbox2" style="display: none;">
					<ul class="talk">
						<li th:each="reply:${tReplyList}">
							<figure><img src="/taobao/images/detail-tou.png"/></figure>
							<dl>
								<dt>
									<p th:text="${reply.username}"> 瑾晨</p>
									<time>${reply.createdate}</time>
									<div class="star">
										<span><img src="/taobao/images/detail-iocn01.png"/></span>
										<span><img src="/taobao/images/detail-iocn01.png"/></span>
										<span><img src="/taobao/images/detail-iocn01.png"/></span>
										<span><img src="/taobao/images/detail-iocn001.png"/></span>
										<span><img src="/taobao/images/detail-iocn001.png"/></span>
									</div>
								</dt>
								<dd th:text="${reply.content}">哎哟不错哦，很性感哦！</dd>
							</dl>
						</li>
					</ul>
				</section>
				
			</article>
		</section>
	</div>
	
	
		<footer class="detail-footer fixed-footer">
			<a href="#" class="go-car">
				<input type="button" onclick="addCart(1)" value="加入购物车"/>
			</a>
			<a href="buy.html" onclick="addCart(2)" class="buy">
				立即购买
			</a>
		</footer>
	
<script src="/taobao/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(window).scroll(function() {
	    if ($(".detail-header").offset().top > 50) {
        $(".detail-header").addClass("change");
    } else {
        $(".detail-header").removeClass("change");
    }
	});
</script>
<script src="/taobao/js/swiper.min.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			var mySwiper = new Swiper('.swiper-container',{
				    loop: true,
				    speed:1000,
					autoplay: 2000,
					pagination: '.swiper-pagination',
				  });
		})
	</script>
	<script type="text/javascript">
        function addCart(type){

            var goodsid=$("#goodsid").val();
            $.ajax({
                type: "post",
                url: '/taobao/person/addCart',
                data: {goodsid:goodsid},
                dataType: "json",
                success:function(data) {
                    if(data.success=='true'){
                        if(type==1){
                            layer.msg("加入购车成功!",2, 8);
                        }else{
                            var goodsid1=$("#goodsid").val();
                            window.location.href = "/taobao/person/LikBuy/"+goodsid1;
                        }
                    }else if(data.success=='login'){
                        window.location.href = "/taobao/login"
                    }
                }
            });
        }
        function addRePly(){
            var content=$("#say_some").val();
            var goodsid=$("#goodsid").val();
            $.ajax({
                type: "post",
                url: '/taobao/addRePly',
                data: {content:content,goodsid:goodsid},
                dataType: "json",
                success:function(data) {
                    if(data.success){
                        layer.msg("评论成功!",{icon:2});

                    }else{
                        layer.msg("评论失败!",{icon:2});
                    }
                }
            });
        }
	</script>
<script type="text/javascript">
	$(function(){
		$('.chose li').click(function(){
				
			$(this).addClass('chose-active').siblings().removeClass('chose-active');

			var tags=document.getElementsByClassName('chose-active');//获取标签

			var tagArr = "";
	        for(var i=0;i < tags.length; i++)
	        {
	            tagArr += tags[i].innerHTML;//保存满足条件的元素

	        }
	       
	        $('#sss').html(tagArr);

		});

		$('.article li').click(function(){

			$(this).addClass('article-active').siblings().removeClass('article-active');
			if($(this).attr("id")=="talkbox1"){
				$('.talkbox1').show();
				$('.talkbox2').hide();
			}else{
				$('.talkbox2').show();
				$('.talkbox1').hide();
			}

		});	
	});
</script>
</body>
</html>